<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/public/common.jspf" %>

<!DOCTYPE html>
<html class="bootstrap-admin-vertical-centered">
<head>
    <title>Login page | Bootstrap 3.x Admin Theme</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="decorator" content="no">

    <!-- Bootstrap -->
    <link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/styles/css/bootstrap.min.css">
    <link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/styles/css/bootstrap-theme.min.css">

    <!-- Bootstrap Admin Theme -->
    <link rel="stylesheet" media="screen"
          href="${pageContext.request.contextPath}/styles/css/bootstrap-admin-theme.css">

    <!-- Custom styles -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/styles/css/custome.css">
    <style type="text/css">
        .alert {
            margin: 0 auto 20px;
        }
    </style>

    <!--Scripts-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/scripts/jquery_validate/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // Setting width of the alert box
            var alert = $('.alert');
            var formWidth = $('.bootstrap-admin-login-form').innerWidth();
            var alertPadding = parseInt($('.alert').css('padding'));

            if (isNaN(alertPadding)) {
                alertPadding = parseInt($(alert).css('padding-left'));
            }

            $('.alert').width(formWidth - 2 * alertPadding);
        });

        //validate
        $(document).ready(function () {
            $('#registerForm').validate({
                rules: {
                    loginName: {
                        required: true,
                        minlength: 6,
                        maxlength: 255
                    },
                    name: {
                        required: true,
                        maxlength: 255
                    },
                    department: {
                        required: true,
                        maxlength: 255
                    },
                    email: {
                        required: true,
                        maxlength: 255,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 6,
                        maxlength: 255
                    },
                    confirmPassword: {
                        required: true,
                        minlength: 6,
                        maxlength: 255,
                        equalTo: "#password"
                    }
                },
                messages: {
                    loginName: {
                        required: '请输入登陆名',
                        minlength: '登录名长度在6-255字符之间',
                        maxlength: '登录名长度在6-255字符之间'
                    },
                    name: {
                        required: '请输入姓名',
                        maxlength: '姓名长度不超过255字符'
                    },
                    department: {
                        required: '请输入部门',
                        maxlength: '部门长度不超过255字符'
                    },
                    email: {
                        required: '请输入邮箱',
                        maxlength: '邮箱长度不超过255字符',
                        email: '不符合邮箱格式'
                    },
                    password: {
                        required: '请输入密码',
                        minlength: '密码长度在6-255字符之间',
                        maxlength: '密码长度在6-255字符之间'
                    },
                    confirmPassword: {
                        required: '请重复密码',
                        minlength: '密码长度在6-255字符',
                        maxlength: '密码长度在6-255字符',
                        equalTo: '两次输入密码不一致'
                    }
                }
            });
        });
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/html5shiv.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/respond.min.js"></script>
    <![endif]-->
</head>
<body class="bootstrap-admin-without-padding">
<div class="container">
    <div class="row">
        <%@ include file="/WEB-INF/jsp/public/pageinfo.jspf" %>
        <div class="col-lg-12">
            <!--注册表单-->
            <s:form method="post" action="user_register" cssClass="bootstrap-admin-login-form" id="registerForm">
                <h1>注册</h1>

                <div class="form-group">
                    <s:textfield cssClass="form-control" name="loginName" placeholder="登陆名"/>
                    <s:fielderror fieldName="loginName"/>
                </div>
                <div class="form-group">
                    <s:textfield cssClass="form-control" name="name" placeholder="姓名"/>
                    <s:fielderror fieldName="name"/>
                </div>
                <div class="form-group">
                    <s:textfield cssClass="form-control" name="department" placeholder="部门"/>
                    <s:fielderror fieldName="department"/>
                </div>
                <div class="form-group">
                    <s:textfield cssClass="form-control" name="email" placeholder="邮箱"/>
                    <s:fielderror fieldName="email"/>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6" style="padding-left: 0px;">
                            <s:password cssClass="form-control" name="password" id="password" placeholder="密码"/>
                            <s:fielderror fieldName="password"/>
                        </div>
                        <div class="col-xs-6" style="padding-right: 0px;">
                            <s:password cssClass="form-control" name="confirmPassword" placeholder="确认密码"/>
                            <s:fielderror fieldName="confirmPassword"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary" type="submit">注册</button>
                    <s:a action="index" cssClass="btn btn-lg btn-default pull-right">返回</s:a>
                    <!--注册表单结束-->
                </div>
            </s:form>
        </div>
</body>
</html>
